<template>
    <Page class="basic company">
        <template #header>
            <RoomInput class="mr-2" multiple :rooms.sync="queryForm.rooms"></RoomInput>
            <EdSelect v-model="queryForm.payCause" :selectParams="selectParamsPayCause"></EdSelect>
            <el-input v-model="queryForm.address" placeholder="房屋编号" />
            <el-input v-model="queryForm.ownerName" placeholder="客户姓名" />
            <el-button class="ed-button ed_black-bottom" @click="search()"><svg-icon class="svg-middle" icon-class="search-svg" />查 询</el-button>
            <el-button class="ed-button ed_white_bottom" @click="reset()"><svg-icon icon-class="reset-svg" />重 置</el-button>
        </template>
        <PageCard title="收费记录列表">
            <ApiTable :api="tableApi" ref="table" :params="queryForm">
                <el-table-column type="index" width="80" label="序号"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="villageName" label="项目"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="address" label="房屋编号" width="230"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="ownerName" label="客户姓名"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="payCause" label="收费类型">
                    <template slot-scope="scope">
                        <span>{{ returnName(scope.row['payCause'], selectParamsPayCause.options) }}</span>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="paymentAmount" label="收费金额"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="payTime" label="付款时间" sortable :formatter="formatDate"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="" label="操作">
                    <template slot-scope="scope">
                        <el-button class="ed-table-bottom ed_black_border" @click="updateRow(scope.row)" v-has="'charge:log:info'">详情</el-button>
                    </template>
                </el-table-column>
            </ApiTable>
        </PageCard>
    </Page>
</template>

<script>
import Page from '../../components/Page.vue'
import PageCard from 'src/views/components/PageCard.vue'
import ApiTable from 'src/components/ApiTable.vue'
import EdSelect from 'src/components/EdSelect.vue'
import { defineComponent } from 'vue'
import { payLogList } from "./api";
import { returnName } from "src/utils/common.js";
import RoomInput from 'src/components/HousePicker/RoomInput.vue'
export default defineComponent({
    name: 'chargeLog',
    components: { Page, PageCard, ApiTable, EdSelect, RoomInput },
    data() {
        return {
            queryForm: {
                rooms: null,
                payCause: '',
                roomCode: '',
                ownerName: "",
            },
            selectParamsAddress: {
                options: [{
                    value: 'first',
                    label: '楼栋1'
                }, {
                    value: 'second',
                    label: '楼栋2'
                }, {
                    value: 'three',
                    label: '楼栋3'
                }],
                placeholder: "请选择分期/楼栋/单元"
            },
            selectParamsPayCause: {
                options: [{
                    value: '0',
                    label: '物业费'
                }, {
                    value: '1',
                    label: '车位费'
                }, {
                    value: '2',
                    label: '其他'
                }],
                placeholder: "请选择收费类型"
            }
        }
    },
    activated() {
        this.$nextTick(() => {
            this.$refs.table.load(1)
        })
    },
    methods: {
        tableApi: payLogList,
        search() {
            this.$refs.table.load(1)
        },
        reset() {
            this.queryForm = {
                rooms: null,
                payCause: '',
                roomCode: '',
                ownerName: "",
            };
            this.$refs.edLazyCascader.reset()
            this.$nextTick(() => {
                this.$refs.table.load(1, 10);
            })
        },
        add() {
            this.$router.push({
                path: '/basic/member-add'
            })
        },
        updateRow(row) {
            this.$router.push({
                path: '/charge/log-info',
                query: { id: row.id },
            })
        },
        del(row) {
            this.confirmRow = row;
            this.$refs.confirmDeleteRef.open("删除确认", "确认删除此项数据？", "warning")
        },
        returnName(val, options) {
            return returnName(val, options)
        },
        formatDate(row, column) {
            // 获取单元格数据
            let date = row[column.property];
            if (date) {
                return this.transformDate(date)
            } else {
                return ''
            }
        },
        //标准时间格式转yyyy-MM-dd HH:mm:ss
        transformDate(date) {
            if (date) {
                let dt = new Date(date);
                return dt.getFullYear() + '-' +
                    ((dt.getMonth() + 1) < 10 ? ('0' + (dt.getMonth() + 1)) : (dt.getMonth() + 1)) + '-' +
                    (dt.getDate() < 10 ? ('0' + dt.getDate()) : dt.getDate()) + ' ' +
                    (dt.getHours() < 10 ? ('0' + dt.getHours()) : dt.getHours()) + ':' +
                    (dt.getMinutes() < 10 ? ('0' + dt.getMinutes()) : dt.getMinutes())
            } else { return '' }
        }
    }
})
</script>

<style scoped>
.btnBorder {
    border: 1px solid #ccc;
    padding: 5px 15px;
    border-radius: 4px;
}
.btnUpd {
    color: #414448 !important;
    border-color: #414448;
}
.btnPay {
    color: #65A9A5;
    border-color: #65A9A5;
}
.btnDel {
    color: #EE7171;
}
</style>